<template>
  <div class="channel">
    <div class="chan_wrap">
      <div class="left">
        <ul class="menu">
          <li v-for="one in menu"
              @click.stop="changeMenu(one.value)"
              class="menu-item"
              :class="[activeName === one.value ? 'active' : '']">{{one.name}}</li>
        </ul>
      </div>
      <keep-alive>
        <component :is="activeName" class="right" :triggerClick="triggerClick"></component>
      </keep-alive>
    </div>

  </div>
</template>
<script>
  import channelSkillGroup from './channelSkillGroupDirectory/index'
  import callCustomerService from './telCustomerService/index'
  import webCustomerService from './webCustomerService/index'
  import wxCustomerService from './weixin/index.vue'
  import wxAppCustomerService from './weixinApp/index.vue'
  import aliPayMiniService from './AlipayMini/index.vue'
  import mailCustomerService from './email/index.vue'
  import WeiboCustomerService from './weibo/index.vue'
  import videoGlobalConfig from './videoGlobalConfig/videoGlobalConfig.vue'
  import webchatGlobalConfig from './webchatGlobalConfig/index.vue'
  import AppCustomerService from './AppCustomerDirectory'
  import WeChatOfficial from './weChatOfficial'
  import channelConfigwebChatUrl from './webChatUrl/index'
  import message from './smsConfig'
  import schedule from './schedule'
  import remoteControlConfig from './remoteControlConfig/index'
  import enterpriseService from './enterprise/index'
  import baiduBCP from './baiduBCP/index'
  import TikTok from './tikTok/index'
  import { isHasMenu } from '@/utils/m7Utils'
  export default {
    name: 'ChannelConfig',
    data () {
      return {
        activeName: 'channelSkillGroup',
        menu: [
          {name: this.$t('config.channel.channelSkillGroup'), value: 'channelSkillGroup', id: 'channel_skill_group'},
          {name: this.$t('config.channel.callCustomerService'), value: 'callCustomerService', id: 'call_config'},
          {name: this.$t('config.channel.webCustomerService'), value: 'webCustomerService', id: 'website_insert'},
          {name: this.$t('config.channel.AppCustomerService'), value: 'AppCustomerService', id: 'app_insert'},
          {name: this.$t('config.channel.WXOfficialService'), value: 'WeChatOfficial'},
          {name: this.$t('config.channel.WXCustomerService'), value: 'wxCustomerService', id: 'wechat_insert'},
          {name: this.$t('config.channel.WXAppCustomerService'), value: 'wxAppCustomerService', id: 'wxmini_insert'},
          {name: this.$t('config.channel.AlipayMiniService'), value: 'aliPayMiniService', id: 'alipay_insert'},
          {name: this.$t('config.channel.enterpriseService'), value: 'enterpriseService', id: 'wxEnterprise_insert'},
          {name: this.$t('config.channel.WeiboCustomerService'), value: 'WeiboCustomerService', id: 'weibo_insert'},
          {name: this.$t('config.channel.baiduBCP'), value: 'baiduBCP'},
          {name: this.$t('config.channel.TikTok'), value: 'TikTok'},
          {name: this.$t('config.channel.email'), value: 'mailCustomerService', id: 'email_insert'},
          {name: this.$t('config.channel.webchatGlobalConfig'), value: 'webchatGlobalConfig', id: 'website_global_config'},
          {name: this.$t('config.channel.videoGlobalConfig'), value: 'videoGlobalConfig', id: 'video_insert'},
          {name: this.$t('config.channel.message'), value: 'message', id: 'sms_config'},
          {name: this.$t('config.channel.webchatProcessManage'), value: 'schedule'},
          {name: this.$t('config.channel.channelConfigwebChatUrl'), value: 'channelConfigwebChatUrl', id: 'im_docking_config'},
          {name: this.$t('config.channel.remoteControl'), value: 'remoteControlConfig', id: 'remote_control_management'}
        ],
        triggerClick: 0
      }
    },
    components: {
      channelSkillGroup,
      callCustomerService,
      webCustomerService,
      videoGlobalConfig,
      webchatGlobalConfig,
      wxCustomerService,
      wxAppCustomerService,
      AppCustomerService,
      WeChatOfficial,
      mailCustomerService,
      WeiboCustomerService,
      channelConfigwebChatUrl,
      message,
      schedule,
      remoteControlConfig,
      aliPayMiniService,
      baiduBCP,
      TikTok,
      enterpriseService
    },
    methods: {
      dealMenu () {
        this.menu = this.menu.filter(item => {
          return !item.id || (item.id && isHasMenu(item.id, this.$store.state.session.user))
        })
        this.activeName = this.menu[0].value
        console.log(this.menu)
      },
      changeMenu (value) {
        this.activeName = value
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.query.active) {
          // 从其他模块push路由
          vm.menu.some(item => {
            if (item.value === to.query.active) {
              vm.activeName = item.value
              return true
            }
          })
        }
      })
    },
    beforeMount () {
      this.dealMenu()
//      let PBXS = this.$store.state.session.account.pbx
//      let data = {}
//      data.Account = this.$store.state.session.account.account
//      data.PBX = PBXS[0].PBX
//      this.$store.dispatch('getAllNodesByPbxForSkill', data).then(() => {})
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .channel
    padding 20px
    box-sizing border-box
    .chan_wrap
      border 1px solid $c-border1
      height calc(100vh - 135px)
      background-color #fff
    .left
      width 150px
      height 100%
      overflow-y auto
      float left
      box-sizing border-box
      border-right 1px solid $c-border1
    .right
      width calc(100% - 150px)
      height 100%
      float left
      overflow hidden
  .menu
    line-height 36px
    text-align left
  .menu-item
    cursor pointer
    font-size 14px
    padding-left 14px
    font-weight 300
    text-transform capitalize
  .menu-item.active
    background-color $c-main
    color #fff
</style>
